<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
                ><a href="/index/menu">菜谱管理</a></el-breadcrumb-item
            >
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-input
            class="el-input__inner"
            v-model="input"
            placeholder="请输入内容"
        ></el-input>
        <el-button type="primary" @click="searchMenu">搜索</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary"
            >添加
        </el-button>
        <el-table :data="menusData" style="width: 100%">
            <el-table-column
                class="table_head"
                label="菜谱编号"
                prop="_id"
                align="center"
                width="220"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="名称"
                prop="name"
                align="center"
                width="200"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="缩略图"
                prop="coverpic"
                align="center"
            >
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.coverpic"
                        fit="cover"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column
                class="table_head"
                label="浏览量"
                prop="pageview"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="收藏量"
                prop="pageview"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="是否免费"
                prop="isFree"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="是否热点"
                prop="isHot"
                align="center"
            >
            </el-table-column>
            <el-table-column label="原料" align="center" width="100">
                <template slot-scope="scope">
                    <el-button
                        @click="getIngredient(scope.row._id)"
                        type="text"
                        size="small"
                        >查看</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column label="制作步骤" align="center" width="100">
                <template slot-scope="scope">
                    <el-button
                        @click="getMethod(scope.row._id)"
                        type="text"
                        size="small"
                        >查看</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column class="table_head" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        icon="el-icon-edit"
                        size="mini"
                        type="primary"
                        @click="edit(scope.row)"
                        >修改</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="searchData.currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="searchData.pageSize"
                layout="prev, pager, next,sizes"
                :total="total"
            >
            </el-pagination>
        </div>
        <el-dialog title="原料" :visible.sync="ingredientShow" width="500px">
            <el-table :data="ingredient">
                <el-table-column
                    property="name"
                    label="原料"
                    width="200"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="number"
                    label="用量"
                    align="center"
                ></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="制作步骤" :visible.sync="methodShow" width="500px">
            <el-table :data="method">
                <el-table-column
                    property="describe"
                    label="描述"
                    align="center"
                ></el-table-column>
                <el-table-column property="name" label="图片" align="center">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.img" fit="cover"></el-image>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="editShow" width="500px">
            <el-form :model="form">
                <el-form-item label="餐品id" :label-width="formLabelWidth">
                    <el-input v-model="form._id" disabled></el-input>
                </el-form-item>
                <el-form-item label="菜品名字" :label-width="formLabelWidth">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="花费时间" :label-width="formLabelWidth">
                    <el-input v-model="form.needtime"></el-input>
                </el-form-item>
                <el-form-item label="是否免费" :label-width="formLabelWidth">
                    <el-input v-model="form.isFree"></el-input>
                </el-form-item>
                <el-form-item label="是否热点" :label-width="formLabelWidth">
                    <el-input v-model="form.isHot"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editShow = false">取 消</el-button>
                <el-button type="primary" @click="editBtn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menusData: [],
            total: 0,
            pages: 0,
            ingredient: [],
            ingredientShow: false,
            method: [],
            methodShow: false,
            editShow: false,
            searchData: {
                pageSize: 10,
                currentPage: 0,
            },
            input: "",
            form: {},
            formLabelWidth: "120px",
        };
    },
    computed: {
        // isFree() {
        // }
    },
    watch: {
        searchData: {
            handler() {
                this.findAllMenu();
            },
            deep: true,
        },
    },
    methods: {
        async getIngredient(_id) {
            const result = await this.$api.menus.menuDetail({ _id });
            if (result.meta.status == 200) {
                this.ingredient = result.message[0].ingredient;
                console.log(result.message[0].ingredient);
            }
            this.ingredientShow = true;
        },
        async getMethod(_id) {
            const result = await this.$api.menus.menuDetail({ _id });
            if (result.meta.status == 200) {
                this.method = result.message[0].method;
                console.log(result.message[0].method);
            }
            this.methodShow = true;
        },
        // 修改
        edit(item) {
            this.form = {
                _id: item._id,
                name: item.name,
                needtime: item.needtime,
                isFree: item.isFree,
                isHot: item.isHot,
            };
            this.editShow = true;
        },
        async editBtn() {
            const result = await this.$api.menus.updateMenu(this.form);
            if (result.meta.status == 200) {
                this.$message({
                    message: result.meta.msg,
                    type: "success",
                });
                this.editShow = false;
                this.findAllMenu();
            }
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
        },
        currentChange(val) {
            this.searchData.currentPage = val;
        },
        async findAllMenu() {
            if (this.input) {
                this.searchMenu();
            } else {
                const result = await this.$api.menus.findAllMenu({
                    ...this.searchData,
                    val: this.input,
                });
                if (result.meta.status == 200) {
                    this.menusData = result.menus;
                    this.total = result.total;
                    this.pages = result.pages;
                }
            }
        },
        async searchMenu() {
            const result = await this.$api.menus.searchMenu({
                ...this.searchData,
                val: this.input,
            });
            if (result.meta.status == 200) {
                this.menusData = result.menus;
                this.total = result.total;
                this.pages = result.pages;
            }
            console.log(result);
        },
    },
    created() {
        this.findAllMenu();
    },
};
</script>

<style scoped>
.el-input__inner >>> {
    width: 277px;
    padding: 0;
    margin-bottom: 20px;
}
.table_head {
    background-color: rgb(250, 250, 250);
}
.page {
    display: flex;
    justify-content: flex-end;
}
</style>